<template>
    <div class="content">
        <div class="w100 haed bbg pr">
            <img @click="goHome" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">卡券管理</p>
        </div>
        <div class="button pr" >
            <button @click="onAdd">
                <img style="margin-right: 24rem;width: 25rem;height: 25rem;" src="../../assets/img/coupon/coupon.png" alt="">新增优惠券
            </button>
        </div>
        <main class="pr brs">
            <div class="tab">
                <div :class="showNum==0?'active':''" @click="showNum = 0">进行中</div>
                <div :class="showNum==1?'active':''" @click="showNum = 1">已结束</div>
            </div>
            <ul class="underway" v-show="showNum == 0">
                <li v-for="el in listArr" :key="el.id">
                    <div class="list-left">
                        <span>满{{el.amountCondition}}元可用</span> 
                        <p><em>￥</em>{{ el.discounts | discounts }}</p>
                    </div>
                    <div class="list-right">
                        <p>优惠券名称：{{el.discountsName}}</p>
                        <p>有效期：{{el.startTime | formDate}}-{{el.endTime | formDate}}</p>
                        <span>每人限领{{el.limiting}}张</span>
                    </div>
                </li>
            </ul>
            <ul class="finish" v-show="showNum == 1">
                <li v-for="el in finishArr" :key="el.id">
                    <div class="list-left">
                        <span>满{{el.amountCondition}}元可用</span> 
                        <p><em>￥</em>{{el.discounts | discounts }}</p>
                    </div>
                    <div class="list-right">
                        <p>优惠券名称：{{el.discountsName}}</p>
                        <p>有效期：{{el.startTime | formDate}}-{{el.endTime | formDate}}</p>
                        <span>每人限领{{el.limiting}}张</span>
                        <img style="width: 148rem;height: 78rem;" class="image" src="../../assets/img/coupon/finish.png" alt="">
                    </div>
                </li>
            </ul>
        </main>
    </div>
</template>
<script>
import {queryDiscounts} from '../../api/index'
export default{
    data(){
        return {
            //  展示哪一个
            showNum:0,
            query:{
                businessId:JSON.parse(localStorage.getItem('ID')),
                state:1,
                newDate:'2023-03-01'
            },
            allList:[],  //  全部参数
            listArr: [],  //  进行中
            finishArr:[]  //  已结束
        }
    },
    created(){
        //  获取商家优惠券
        this.getCoupon();;
        //  初始状态
        this.changeShowNum();
    },
    methods:{
        //  跳转到新增优惠券
        onAdd(){
            this.$router.push('sendCoupon');
        },
        //  返回首页
        goHome(){
            this.$router.push('/');
        },
        //  获取商家优惠券
        getCoupon(){
            queryDiscounts(this.query)
            .then(r=>{
                console.log(r);
                this.allList = r.data;
                this.changeShowNum();
            })
        },
        //  切换状态
        changeShowNum(){
            // 现在时间
            var date = new Date().getTime();
            //  判断
            if(this.showNum == 0){
                this.listArr = this.allList.filter(el => {
                    var endTime = el.endTime;
                    endTime = new Date(endTime).getTime();
                    return endTime > date;
                })
            }else if(this.showNum == 1){
                this.finishArr = this.allList.filter(el => {
                    var endTime = el.endTime;
                    endTime = new Date(endTime).getTime();
                    return endTime < date;
                })
            }
        }
    },
    //  监听
    watch:{
        showNum(nVal,oVal){
            if(nVal != oVal){
                this.changeShowNum();
            }
        }
    },
    filters:{
        //  时间过滤
        formDate(val) {
            const d = new Date(val); // val 为表格内取到的后台时间
            const month =d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
            const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
            const times = `${d.getFullYear()}.${month}.${day}`;
            return times;
        },
        discounts(val){
            if(val < 1){
                return val * 10;
            }else{
                return val;
            }
        }
    }
}
</script>
<style scoped>
.cfff{color: #fff;}
.button{top: -287rem;display: flex;justify-content: center;}
.button button{font-size: 32rem;width: 660rem;height: 80rem;border-radius: 6rem;background-color: #f7f7f7;border-radius: 40rem;border: none;color: #1e72f1;}
main{background-color: #fff;margin: -257rem 20rem 0;padding: 0 28rem;}
main .tab{font-size: 32rem;text-align: center;;display: flex;justify-content: center;padding: 39rem 0 30rem;}
main .tab div{width: 173rem;padding: 20rem 0;background-color: #f2f2f2;color: #2f81fa;line-height: 32rem;}
main .tab div:first-child{border-top-left-radius: 36rem;border-bottom-left-radius: 36rem;}
main .tab div:last-child{border-top-right-radius: 36rem;border-bottom-right-radius: 36rem;}
main .tab div.active{color: #fff;background-color: #2f81fa;}

ul li{color: #fff;display: flex;border-radius: 10rem;margin-bottom: 40rem;height: 225rem;width: 650rem;justify-content: start;}
ul li .list-left{border-right: 5px solid #ffd1b2;width: 194rem;padding: 42rem 0 0 20rem;box-sizing: border-box;background-color: #ff6c12;border-top-left-radius: 10rem;border-bottom-left-radius: 10rem;}
ul li .list-left span{font-size: 26rem;line-height: 26rem;margin-bottom: 30rem;display: block;}
ul li .list-left p{font-size: 70rem;line-height: 65rem;font-weight: bold;margin-left: 10rem;}
ul li .list-left p em{font-size: 30rem;line-height: 25rem;font-style: normal;font-weight: normal}
ul li .list-right{padding: 42rem 0 0 23rem;width: 456rem;position: relative;}
ul li .list-right p{font-size: 26rem;line-height: 26rem;color: #000;margin-bottom: 20rem;}
ul li .list-right p:nth-child(2){font-size: 20rem;line-height: 22rem;color: #000;margin-bottom: 50rem;}
ul li .list-right span{font-size: 22rem;line-height: 22rem;color: #000;}
ul li .list-right .image{position: absolute;right: 30rem;bottom: 15rem;}



.underway li{background-color: #fff3eb;}
.finish li{background-color: #fff3eb;-webkit-filter: opacity(100%);filter: opacity(50%);;}
.btn button.active{}
</style>